<template>
  <div class="welcome-page">
    <div class="nav-bar">
      <div class="nav-status" :style="{height:statusH + 'px'}"></div>
      <div class="nav-head flex-center" :style="{height:titleH + 'px'}">
        <div class="flex-1 flex-row-v-center" style="padding-left: 10px;">
          <img style="width: 22px;height: 22px" src="/static/assets/img/icon/icon-arrow-left.png"
               @click="onClickGoBack()"/>
        </div>
        <div class="flex-1">
        </div>
        <div class="flex-1"></div>
      </div>
    </div>
    <div class="welcome-container" :style="{'padding-top':titleH + statusH + 'px'}">
      <div class="login flex-col-v-center">
        <div class="avatar-container">
          <open-data class="avatar" type="userAvatarUrl"></open-data>
        </div>
        <div class="name-container flex-row-v-center">
          <span class="name">Hi,</span>
          <open-data class="name" type="userNickName"></open-data>
        </div>

        <button @getuserinfo="getUserInfo" open-type="getUserInfo">微信登录</button>
      </div>
    </div>
  </div>
</template>

<script>
  import global from "global";
  import Core from "core";
  import Common from "common";

  export default {
    components: {},

    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH
      };
    },
    mounted () {
    },
    methods: {

      onClickGoBack () {
        Core.Util.goBack();
      },
      getUserInfo (e) {
        let self = this;
        Common.authLogin(() => {
          let isLogin = Common.isLogin();
          if (isLogin) {
            self._bindDoctor();
            self.onClickGoBack();
          }
        });
      },
      _bindDoctor () {
        let json = Core.Data.get("json");
        if (json) {
          Core.Api.User.userTrackByScan(JSON.stringify(json))
            .then(res => {
              Core.Data.remove("json");
            })
            .catch(err => {
            });
        }

      }
    }
  };
</script>

<style lang="scss">
  .welcome-page {
    width: 100%;
    height: 100%;
    position: relative;
    background: #FFFFFF;

    .nav-bar {
      background: #FFFFFF;
    }

    .welcome-container {
      width: 100%;
      .login {
        margin-top: 100px;

        .avatar-container {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          overflow: hidden;
          .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
          }
        }

        .name-container {
          margin-top: 20px;
          .name {
            font-size: 18px;
          }
          open-data {
            margin-left: 10px;
          }
        }

        button {
          padding: 0px 20px;
          margin-top: 20px;
          font-size: 18px;
        }
      }
    }
  }
</style>
